// Name:              Utility
//
// Description:       Useful classes
//
// Component:
//                    `.am-cf`
//                    `.am-f*`
//                    `.am-vertical-align`
//                    `.am-display-*`
//                    `.am-visible-*`
//                    `.am-hidden-*`
//
// =============================================================================

/* ==========================================================================
   Component: Utility
 ============================================================================ */

.@{ns}scrollable-horizontal {
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
}

.@{ns}scrollable-vertical {
    height: @utility-scrollable-height;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    resize: vertical;
}


/* Border-radius*/

.@{ns}square {
    border-radius: 0;
}

.@{ns}radius {
    border-radius: @radius-normal;
}

.@{ns}round {
    border-radius: @global-rounded;
}

.@{ns}circle {
    border-radius: 50% !important;
}


/* Float blocks*/

.@{ns}cf {
    .clearfix();
}

.@{ns}fl {
    float: left;
}

.@{ns}fr {
    float: right;
}

.@{ns}nbfc {
    overflow: hidden;
}

.@{ns}center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* Display */

.@{ns}block {
    display: block !important;
}

.@{ns}inline {
    display: inline !important;
}

.@{ns}inline-block {
    display: inline-block !important;
}

.@{ns}hide {
    display: none !important;
    visibility: hidden !important;
}

// Vertical alignment
// =============================================================================

/*
* Remove whitespace between child elements when using `inline-block`
*/

.@{ns}vertical-align {
    font-size: 0.001px;
}


/*
* The `@{ns}vertical-align` container needs a specific height
*/

.@{ns}vertical-align:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}


/*
* Sub-object which can have any height
* 1. Reset whitespace hack
*/

.@{ns}vertical-align-middle, .@{ns}vertical-align-bottom {
    display: inline-block;
    font-size: @global-font-size;
    /* 1 */
    max-width: 100%;
}

.@{ns}vertical-align-middle {
    vertical-align: middle;
}

.@{ns}vertical-align-bottom {
    vertical-align: bottom;
}

// Responsive width
// =============================================================================
.@{ns}responsive-width {
    box-sizing: border-box;
    max-width: 100%;
    height: auto;
}

// =============================================================================
// Margin & Padding
// =============================================================================
// margin mixin
.spacing-variant(@type, @dimension) {
    .@{ns}@{type}@{dimension} {
        @{type}@{dimension}: @global-margin;
    }
    .@{ns}@{type}@{dimension}-0 {
        @{type}@{dimension}: 0!important;
    }
    .@{ns}@{type}@{dimension}-xs {
        @{type}@{dimension}: @global-margin-xs;
    }
    .@{ns}@{type}@{dimension}-sm {
        @{type}@{dimension}: @global-margin-sm;
    }
    .@{ns}@{type}@{dimension}-lg {
        @{type}@{dimension}: @global-margin-lg;
    }
    .@{ns}@{type}@{dimension}-xl {
        @{type}@{dimension}: @global-margin-xl;
    }
}

.spacing-all-variant(@type) {
    .@{ns}@{type} {
        @{type}: @global-margin;
    }
    .@{ns}@{type}-0 {
        @{type}: 0!important;
    }
    .@{ns}@{type}-xs {
        @{type}: @global-margin-xs;
    }
    .@{ns}@{type}-sm {
        @{type}: @global-margin-sm;
    }
    .@{ns}@{type}-lg {
        @{type}: @global-margin-lg;
    }
    .@{ns}@{type}-xl {
        @{type}: @global-margin-xl;
    }
}

.spacing-hv-variant (@type, @dimension, @dimension1, @dimension2) {
    .@{ns}@{type}@{dimension} {
        @{type}@{dimension1}: @global-margin;
        @{type}@{dimension2}: @global-margin;
    }
    .@{ns}@{type}@{dimension}-0 {
        @{type}@{dimension1}: 0!important;
        @{type}@{dimension2}: 0!important;
    }
    .@{ns}@{type}@{dimension}-xs {
        @{type}@{dimension1}: @global-margin-xs;
        @{type}@{dimension2}: @global-margin-xs;
    }
    .@{ns}@{type}@{dimension}-sm {
        @{type}@{dimension1}: @global-margin-sm;
        @{type}@{dimension2}: @global-margin-sm;
    }
    .@{ns}@{type}@{dimension}-lg {
        @{type}@{dimension1}: @global-margin-lg;
        @{type}@{dimension2}: @global-margin-lg;
    }
    .@{ns}@{type}@{dimension}-xl {
        @{type}@{dimension1}: @global-margin-xl;
        @{type}@{dimension2}: @global-margin-xl;
    }
}


/* Margin helpers */

.spacing-all-variant(margin);
.spacing-hv-variant(margin, -horizontal, -left, -right);
.spacing-hv-variant(margin, -vertical, -top, -bottom);
.spacing-variant(margin, -top);
.spacing-variant(margin, -bottom);
.spacing-variant(margin, -left);
.spacing-variant(margin, -right);

/* Padding helpers */

.spacing-all-variant(padding);
.spacing-hv-variant(padding, -horizontal, -left, -right);
.spacing-hv-variant(padding, -vertical, -top, -bottom);
.spacing-variant(padding, -top);
.spacing-variant(padding, -bottom);
.spacing-variant(padding, -left);
.spacing-variant(padding, -right);
// =============================================================================
// Foundation Visibility HTML Classes
// =============================================================================

/* small displays */

@media @screen {
    .@{ns}show-sm-only, .@{ns}show-sm-up, .@{ns}show-sm, .@{ns}show-sm-down, .@{ns}hide-md-only, .@{ns}hide-md-up, .@{ns}hide-md, .@{ns}show-md-down, .@{ns}hide-lg-only, .@{ns}hide-lg-up, .@{ns}hide-lg, .@{ns}show-lg-down {
        display: inherit !important;
    }
    .@{ns}hide-sm-only, .@{ns}hide-sm-up, .@{ns}hide-sm, .@{ns}hide-sm-down, .@{ns}show-md-only, .@{ns}show-md-up, .@{ns}show-md, .@{ns}hide-md-down, .@{ns}show-lg-only, .@{ns}show-lg-up, .@{ns}show-lg, .@{ns}hide-lg-down {
        display: none !important;
    }
    /* table */
    table.@{ns}show-sm-only, table.@{ns}show-sm-up, table.@{ns}show-sm, table.@{ns}show-sm-down, table.@{ns}hide-md-only, table.@{ns}hide-md-up, table.@{ns}hide-md, table.@{ns}show-md-down, table.@{ns}hide-lg-only, table.@{ns}hide-lg-up, table.@{ns}hide-lg, table.@{ns}show-lg-down {
        display: table !important;
    }
    thead.@{ns}show-sm-only, thead.@{ns}show-sm-up, thead.@{ns}show-sm, thead.@{ns}show-sm-down, thead.@{ns}hide-md-only, thead.@{ns}hide-md-up, thead.@{ns}hide-md, thead.@{ns}show-md-down, thead.@{ns}hide-lg-only, thead.@{ns}hide-lg-up, thead.@{ns}hide-lg, thead.@{ns}show-lg-down {
        display: table-header-group !important;
    }
    tbody.@{ns}show-sm-only, tbody.@{ns}show-sm-up, tbody.@{ns}show-sm, tbody.@{ns}show-sm-down, tbody.@{ns}hide-md-only, tbody.@{ns}hide-md-up, tbody.@{ns}hide-md, tbody.@{ns}show-md-down, tbody.@{ns}hide-lg-only, tbody.@{ns}hide-lg-up, tbody.@{ns}hide-lg, tbody.@{ns}show-lg-down {
        display: table-row-group !important;
    }
    tr.@{ns}show-sm-only, tr.@{ns}show-sm-up, tr.@{ns}show-sm, tr.@{ns}show-sm-down, tr.@{ns}hide-md-only, tr.@{ns}hide-md-up, tr.@{ns}hide-md, tr.@{ns}show-md-down, tr.@{ns}hide-lg-only, tr.@{ns}hide-lg-up, tr.@{ns}hide-lg, tr.@{ns}show-lg-down {
        display: table-row !important;
    }
    th.@{ns}show-sm-only, td.@{ns}show-sm-only, th.@{ns}show-sm-up, td.@{ns}show-sm-up, th.@{ns}show-sm, td.@{ns}show-sm, th.@{ns}show-sm-down, td.@{ns}show-sm-down, th.@{ns}hide-md-only, td.@{ns}hide-md-only, th.@{ns}hide-md-up, td.@{ns}hide-md-up, th.@{ns}hide-md, td.@{ns}hide-md, th.@{ns}show-md-down, td.@{ns}show-md-down, th.@{ns}hide-lg-only, td.@{ns}hide-lg-only, th.@{ns}hide-lg-up, td.@{ns}hide-lg-up, th.@{ns}hide-lg, td.@{ns}hide-lg, th.@{ns}show-lg-down, td.@{ns}show-lg-down {
        display: table-cell !important;
    }
}


/* medium displays */

@media @medium-up {
    .@{ns}hide-sm-only, .@{ns}show-sm-up, .@{ns}hide-sm, .@{ns}hide-sm-down, .@{ns}show-md-only, .@{ns}show-md-up, .@{ns}show-md, .@{ns}show-md-down, .@{ns}hide-lg-only, .@{ns}hide-lg-up, .@{ns}hide-lg, .@{ns}show-lg-down {
        display: inherit !important;
    }
    .@{ns}show-sm-only, .@{ns}hide-sm-up, .@{ns}show-sm, .@{ns}show-sm-down, .@{ns}hide-md-only, .@{ns}hide-md-up, .@{ns}hide-md, .@{ns}hide-md-down, .@{ns}show-lg-only, .@{ns}show-lg-up, .@{ns}show-lg, .@{ns}hide-lg-down {
        display: none !important;
    }
    table.@{ns}hide-sm-only, table.@{ns}show-sm-up, table.@{ns}hide-sm, table.@{ns}hide-sm-down, table.@{ns}show-md-only, table.@{ns}show-md-up, table.@{ns}show-md, table.@{ns}show-md-down, table.@{ns}hide-lg-only, table.@{ns}hide-lg-up, table.@{ns}hide-lg, table.@{ns}show-lg-down {
        display: table !important;
    }
    thead.@{ns}hide-sm-only, thead.@{ns}show-sm-up, thead.@{ns}hide-sm, thead.@{ns}hide-sm-down, thead.@{ns}show-md-only, thead.@{ns}show-md-up, thead.@{ns}show-md, thead.@{ns}show-md-down, thead.@{ns}hide-lg-only, thead.@{ns}hide-lg-up, thead.@{ns}hide-lg, thead.@{ns}show-lg-down {
        display: table-header-group !important;
    }
    tbody.@{ns}hide-sm-only, tbody.@{ns}show-sm-up, tbody.@{ns}hide-sm, tbody.@{ns}hide-sm-down, tbody.@{ns}show-md-only, tbody.@{ns}show-md-up, tbody.@{ns}show-md, tbody.@{ns}show-md-down, tbody.@{ns}hide-lg-only, tbody.@{ns}hide-lg-up, tbody.@{ns}hide-lg, tbody.@{ns}show-lg-down {
        display: table-row-group !important;
    }
    tr.@{ns}hide-sm-only, tr.@{ns}show-sm-up, tr.@{ns}hide-sm, tr.@{ns}hide-sm-down, tr.@{ns}show-md-only, tr.@{ns}show-md-up, tr.@{ns}show-md, tr.@{ns}show-md-down, tr.@{ns}hide-lg-only, tr.@{ns}hide-lg-up, tr.@{ns}hide-lg, tr.@{ns}show-lg-down {
        display: table-row !important;
    }
    th.@{ns}hide-sm-only, td.@{ns}hide-sm-only, th.@{ns}show-sm-up, td.@{ns}show-sm-up, th.@{ns}hide-sm, td.@{ns}hide-sm, th.@{ns}hide-sm-down, td.@{ns}hide-sm-down, th.@{ns}show-md-only, td.@{ns}show-md-only, th.@{ns}show-md-up, td.@{ns}show-md-up, th.@{ns}show-md, td.@{ns}show-md, th.@{ns}show-md-down, td.@{ns}show-md-down, th.@{ns}hide-lg-only, td.@{ns}hide-lg-only, th.@{ns}hide-lg-up, td.@{ns}hide-lg-up, th.@{ns}hide-lg, td.@{ns}hide-lg, th.@{ns}show-lg-down, td.@{ns}show-lg-down {
        display: table-cell !important;
    }
}


/* large displays */

@media @large-up {
    .@{ns}hide-sm-only, .@{ns}show-sm-up, .@{ns}hide-sm, .@{ns}hide-sm-down, .@{ns}hide-md-only, .@{ns}show-md-up, .@{ns}hide-md, .@{ns}hide-md-down, .@{ns}show-lg-only, .@{ns}show-lg-up, .@{ns}show-lg, .@{ns}show-lg-down {
        display: inherit !important;
    }
    .@{ns}show-sm-only, .@{ns}hide-sm-up, .@{ns}show-sm, .@{ns}show-sm-down, .@{ns}show-md-only, .@{ns}hide-md-up, .@{ns}show-md, .@{ns}show-md-down, .@{ns}hide-lg-only, .@{ns}hide-lg-up, .@{ns}hide-lg, .@{ns}hide-lg-down {
        display: none !important;
    }
    table.@{ns}hide-sm-only, table.@{ns}show-sm-up, table.@{ns}hide-sm, table.@{ns}hide-sm-down, table.@{ns}hide-md-only, table.@{ns}show-md-up, table.@{ns}hide-md, table.@{ns}hide-md-down, table.@{ns}show-lg-only, table.@{ns}show-lg-up, table.@{ns}show-lg, table.@{ns}show-lg-down {
        display: table !important;
    }
    thead.@{ns}hide-sm-only, thead.@{ns}show-sm-up, thead.@{ns}hide-sm, thead.@{ns}hide-sm-down, thead.@{ns}hide-md-only, thead.@{ns}show-md-up, thead.@{ns}hide-md, thead.@{ns}hide-md-down, thead.@{ns}show-lg-only, thead.@{ns}show-lg-up, thead.@{ns}show-lg, thead.@{ns}show-lg-down {
        display: table-header-group !important;
    }
    tbody.@{ns}hide-sm-only, tbody.@{ns}show-sm-up, tbody.@{ns}hide-sm, tbody.@{ns}hide-sm-down, tbody.@{ns}hide-md-only, tbody.@{ns}show-md-up, tbody.@{ns}hide-md, tbody.@{ns}hide-md-down, tbody.@{ns}show-lg-only, tbody.@{ns}show-lg-up, tbody.@{ns}show-lg, tbody.@{ns}show-lg-down {
        display: table-row-group !important;
    }
    tr.@{ns}hide-sm-only, tr.@{ns}show-sm-up, tr.@{ns}hide-sm, tr.@{ns}hide-sm-down, tr.@{ns}hide-md-only, tr.@{ns}show-md-up, tr.@{ns}hide-md, tr.@{ns}hide-md-down, tr.@{ns}show-lg-only, tr.@{ns}show-lg-up, tr.@{ns}show-lg, tr.@{ns}show-lg-down {
        display: table-row !important;
    }
    th.@{ns}hide-sm-only, td.@{ns}hide-sm-only, th.@{ns}show-sm-up, td.@{ns}show-sm-up, th.@{ns}hide-sm, td.@{ns}hide-sm, th.@{ns}hide-sm-down, td.@{ns}hide-sm-down, th.@{ns}hide-md-only, td.@{ns}hide-md-only, th.@{ns}show-md-up, td.@{ns}show-md-up, th.@{ns}hide-md, td.@{ns}hide-md, th.@{ns}hide-md-down, td.@{ns}hide-md-down, th.@{ns}show-lg-only, td.@{ns}show-lg-only, th.@{ns}show-lg-up, td.@{ns}show-lg-up, th.@{ns}show-lg, td.@{ns}show-lg, th.@{ns}show-lg-down, td.@{ns}show-lg-down {
        display: table-cell !important;
    }
}

@media @landscape {
    .@{ns}show-landscape, .@{ns}hide-portrait {
        display: inherit !important;
    }
    .@{ns}hide-landscape, .@{ns}show-portrait {
        display: none !important;
    }
}

@media @portrait {
    .@{ns}show-portrait, .@{ns}hide-landscape {
        display: inherit !important;
    }
    .@{ns}hide-portrait, .@{ns}show-landscape {
        display: none !important;
    }
}

// =============================================================================
// Text Utility
// =============================================================================
// Font family
// -----------------------------------------------------------------------------
.@{ns}sans-serif {
    font-family: @font-family-sans-serif;
}

.@{ns}serif {
    font-family: @font-family-serif;
}

.@{ns}kai {
    font-family: @font-family-kai;
}

.@{ns}monospace {
    font-family: @font-family-monospace;
}

// Text color
// -----------------------------------------------------------------------------
.@{ns}text-primary {
    color: @global-primary;
}

.@{ns}text-secondary {
    color: @global-secondary;
}

.@{ns}text-success {
    color: @global-success;
}

.@{ns}text-warning {
    color: @global-warning;
}

.@{ns}text-danger {
    color: @global-danger;
}

.@{ns}link-muted {
    color: #666;
    a {
        color: #666;
    }
    &:hover, & a:hover {
        color: #555;
    }
}

// Text size
// -----------------------------------------------------------------------------
.@{ns}text-default {
    font-size: @base-font-size;
}


/*
.@{ns}text-xxs {
  font-size: @font-size-xxs;
}
*/

.@{ns}text-xs {
    font-size: @font-size-xs;
}

.@{ns}text-sm {
    font-size: @font-size-sm;
}

.@{ns}text-lg {
    font-size: @font-size-lg;
}

.@{ns}text-xl {
    font-size: @font-size-xl;
}

.@{ns}text-xxl {
    font-size: @font-size-xxl;
}

.@{ns}text-xxxl {
    font-size: @font-size-xxxl;
}

// Text overflow
// Requires inline-block or block for proper styling
// =============================================================================
.@{ns}ellipsis, .@{ns}text-truncate {
    word-wrap: normal;
    /* for IE */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.@{ns}text-break {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.@{ns}text-nowrap {
    white-space: nowrap;
}

[class*='@{ns}align-'] {
    margin-bottom: 1rem;
}

.@{ns}align-left {
    margin-right: 1rem;
    float: left;
}

.@{ns}align-right {
    margin-left: 1rem;
    float: right;
}


/** Only display content to screen readers
 * See: http://a11yproject.com/posts/how-to-hide-content/
 */

.@{ns}sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* Text Image Replacement */

.@{ns}text-ir {
    .text-hide();
}


/* Text align */

// Text align mixin
.text-align-variant(@point) {
    .@{ns}@{point}text-left {
        text-align: left !important;
    }
    .@{ns}@{point}text-right {
        text-align: right !important;
    }
    .@{ns}@{point}text-center {
        text-align: center !important;
    }
    .@{ns}@{point}text-justify {
        text-align: justify !important;
    }
}

@media @screen {
    .text-align-variant(~"");
}

@media @small-only {
    .text-align-variant(sm-only-);
}

@media @medium-only {
    .text-align-variant(md-only-);
}

@media @medium-up {
    .text-align-variant(md-);
}

@media @large-up {
    .text-align-variant(lg-);
}

.@{ns}text-top {
    vertical-align: top !important;
}

.@{ns}text-middle {
    vertical-align: middle !important;
}

.@{ns}text-bottom {
    vertical-align: bottom !important;
}

// angle
// ========================================================================
.@{ns}angle {
    position: absolute;
    .angle-base;
}

.@{ns}angle-up {
    top: 0;
    .angle-up-variant();
}

.@{ns}angle-down {
    .angle-down-variant();
}

.@{ns}angle-left {
    .angle-left-variant();
}

.@{ns}angle-right {
    .angle-right-variant();
}